<template>
	<view class="encyclopedia_search">
		
		<view class="search_en_box flex_box aic">
			<view class="re item ov">
				<image src="@/static/images/icon_search.png" class="search_img"></image>
				<input type="text" class="left_ipt" placeholder="请输入您想要搜索的问题" />
			</view>
			<view class="search_btn">搜索</view>
		</view>
		
		<view class="hot_box">
			<view class="hot_title">热门搜索</view>
			<view class="hot_data_list">
				<view class="mt32 flex_box aic" v-for="(item, index) in 6" :key="index">
					<view class="sort_num sort_1" v-if="index === 0">{{index + 1}}</view>
					<view class="sort_num sort_2" v-else-if="index === 1">{{index + 1}}</view>
					<view class="sort_num sort_3" v-else-if="index === 2">{{index + 1}}</view>
					<view class="sort_num" v-else="index === 0">{{index + 1}}</view>
					<view class="item ov">
						<view class="txt_1 clamp_1">SWITCH各版本有什么区别?</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	
	page { background: #fff; }
	
	.encyclopedia_search {
		position: relative;
		min-height: 100vh;
		padding: 24rpx;
		background: linear-gradient(90deg, #FFEEEE 0%, #FFFFFF 90.99%);
		.search_en_box {
			position: relative;
			border-radius: 16rpx;
			overflow: hidden;
			.search_img {
				position: absolute;
				top: 50%;
				left: 24rpx;
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
				margin-top: -16rpx;
			}
			.left_ipt {
				position: relative;
				display: inline-block;
				width: 100%;
				height: 84rpx;
				line-height: 80rpx;
				font-size: 24rpx;
				color: #333;
				padding: 0 24rpx 0 64rpx;
				border: 2rpx solid #F0AAB5;
				border-radius: 16rpx 0 0 16rpx;
				outline: none;
				vertical-align: top;
			}
			.search_btn {
				position: relative;
				width: 166rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 24rpx;
				color: #fff;
				background: #F5220F;
				border-radius: 0 16rpx 16rpx 0;
			}
		}
		.hot_box {
			position: relative;
			padding: 0 8rpx;
			margin-top: 48rpx;
			.hot_title {
				position: relative;
				font-size: 36rpx;
				line-height: 48rpx;
				font-weight: bold;
				color: #333;
			}
			.hot_data_list {
				position: relative;
				.sort_num {
					position: relative;
					width: 36rpx;
					height: 36rpx;
					text-align: center;
					line-height: 36rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #fff;
					background: #8F8E93;
					border-radius: 4rpx;
					margin-right: 16rpx;
				}
				.sort_1 { background: #F5220F; }
				.sort_2 { background: #F78528; }
				.sort_3 { background: #FFAD1F; }
				.txt_1 {
					position: relative;
					font-size: 24rpx;
					line-height: 32rpx;
					columns: #333;
				}
			}
		}
	}

</style>
